'use strict';
import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
import { doLogin,onChangeInput } from '../../reducers/auth/actions';
import {Button,Input} from 'antd';
import './style/default/index.less';

class Screen extends Component {
    constructor(props) {
        super(props);
        this.captchaUrl = 'http://127.0.0.1:8024/tool/captcha.php';
        this.state = {
            captchaUrl:this.captchaUrl
        };
    }
    render() {
        let { USER_LOGIN_FETCHING } = this.props.fetching;
        let { password, email, verifyCode } = this.props.auth;
        let showCopyright = false;
        let showRegLink = false;
        let showCaptcha = false;
        return (
            <div>
                <div className="login">
                    <div className="mod-body clearfix">
                        <div className="content pull-left">
                            <h1 className="logo" style={{display:"none"}} />
                            <h2>Welcome</h2>
                            <form action="#">
                                <ul>
                                    <li>
                                        <Input
                                            placeholder="邮箱 / 手机号"
                                            value={email}
                                            onChange={this.onChangeInput.bind(this,"email")}
                                        />
                                    </li>
                                    <li>
                                        <Input
                                            type="password"
                                            placeholder="密码"
                                            value={password}
                                            onChange={this.onChangeInput.bind(this,"password")}
                                        />
                                    </li>
                                    {
                                        showCaptcha ?
                                            <li>
                                                <input style={{width:100}}
                                                       type="password"
                                                       className="form-control"
                                                       placeholder="验证码"
                                                       value={verifyCode}
                                                       onChange={this.onChangeInput.bind(this,"verifyCode")}
                                                />
                                                <img className="captcha" src={this.state.captchaUrl} onClick={::this.onChangeCpatcha}/>
                                            </li>:null
                                    }

                                    <li className="last">
                                        <Button
                                            disabled={ USER_LOGIN_FETCHING ? "disabled" : "" }
                                            type="primary"
                                            className="btn btn-large btn-primary btn-block"
                                            onClick={this.onLoginClick.bind(this)}>
                                            { USER_LOGIN_FETCHING ? "登 录 中 ..." : "登 录" }
                                        </Button> &nbsp;&nbsp;&nbsp;&nbsp;
                                    </li>
                                </ul>

                            </form>
                        </div>
                        <div className="side-bar pull-left"></div>
                    </div>
                    {
                        showRegLink ?
                            <div className="mod-footer">
                                <span>还没有账号?</span>&nbsp;&nbsp;
                                <a href="#">立即注册</a>
                                <span className="hide">&nbsp;&nbsp;•&nbsp;&nbsp;</span>
                            </div>:null
                    }

                </div>
                <div className="footer">
                    Copyright © 2016, All Rights Reserved <br />
                    {
                        showCopyright ?
                            <span className="hidden-xs"> Powered By <a href="#" target="blank">Bimernet3</a></span>:null
                    }
                </div>
            </div>
        );
    }
    onChangeCpatcha(){
        this.setState({
            captchaUrl:this.captchaUrl + "?" + Math.random()
        })
    }
    onChangeInput(key,e){
        this.props.onChangeInput(key, e.target.value);
    }
    onLoginClick(){
        this.props.doLogin(this.context.router);
    }
}
Screen.contextTypes = {
    router: PropTypes.object.isRequired
};
export default connect(
    state =>{
        return {
            auth:state.auth,
            app :state.app,
            fetching:state.common.fetching
        };
    },
    dispatch => {
        return {
            doLogin:(router) =>  dispatch( doLogin( router ) ) ,
            onChangeInput:( key, value ) =>  dispatch( onChangeInput( key, value ) )
        }
    }
)(Screen);

